<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <title>NiiVue</title>
  <link rel="stylesheet" href="niivue.css" />
  <link rel="icon" href="data:;base64,iVBORw0KGgo=" />
</head>

<body>
  <noscript>
    <strong>niivue requires JavaScript.</strong>
  </noscript>
  <header>
    <button id="about">Save NVD</button>
    <button id="clear">Clear</button>
    <button id="update">Update</button>
    <button id="info">Info</button>
  </header>
  <main id="canvas-container">
    <canvas id="gl1"></canvas>
  </main>
  <footer id="location">&nbsp;</footer>
  <script type="module" async>
    import { Niivue, NVImage, NVMesh, NVMeshLoaders, SHOW_RENDER } from "../dist/index.js";
    about.onclick = function () {
      //window.alert("The `Per Vertex` colors visualize a tsf format overlay created with tcksample");
      console.log("document on save", nv1.document);
      
      nv1.saveDocument("atlas.nvd");      
    }

    clear.onclick = async function () {      
      nv1 = new Niivue(defaults);
      await nv1.attachToCanvas(gl1);
      nv1.opts.dragMode = nv1.dragModes.pan;
      nv1.opts.multiplanarShowRender = SHOW_RENDER.ALWAYS;
      nv1.opts.yoke3Dto2DZoom = true;
    }

    update.onclick = async function() {
      nv1.updateGLVolume();
    }

    info.onclick = function() {
      for(const vol of nv1.volumes) {
        console.log('vol', vol);
      }
    }
    var volumeList1 = [
      { url: "../images/mni152.nii.gz" }, 
      { url: "../images/aal.nii.gz" }];
    let defaults = {
      backColor: [0, 0, 0, 1],
      show3Dcrosshair: true,
      onLocationChange: handleLocationChange,
      onDocumentLoaded: handleDocumentLoaded
    };
    async function fetchJSON(fnm) {
      const response = await fetch(fnm)
      const js = await response.json()
      return js
    }
    function handleLocationChange(data) {
      document.getElementById("location").innerHTML = data.string
    }
    async function handleDocumentLoaded(doc) {
      console.log("doc loaded", doc);
    }
    var nv1 = new Niivue(defaults);
    await nv1.attachToCanvas(gl1);
    nv1.opts.dragMode = nv1.dragModes.pan;
    nv1.opts.multiplanarShowRender = SHOW_RENDER.ALWAYS;
    nv1.opts.yoke3Dto2DZoom = true;
    await nv1.loadVolumes(volumeList1);
    let cmap = await fetchJSON("../images/aal.json")
    nv1.volumes[1].setColormapLabel(cmap)
    var meshLayersList1 = [
      {
        url: "../images/lh.curv",
        colormap: "gray",
        cal_min: 0.3,
        cal_max: 0.5,
        opacity: 1,
      },
      { url: "../images/boggle.lh.annot", colormap: "rocket", opacity: 0.5 },
      {
        url: "../images/pval.LH.nii.gz",
        cal_min: 25,
        cal_max: 35.0,
        opacity: 0.9,
      },
    ]
    await nv1.loadMeshes([
      {
        url: "../images/lh.pial",
        rgba255: [255, 255, 255, 255],
        layers: meshLayersList1,
      },
      { url: "../images/CIT168.mz3", rgba255: [0, 0, 255, 255] },
    ])
    nv1.opts.showLegend = false
    nv1.setClipPlane([-0.12, 180, 40]);
    nv1.setRenderAzimuthElevation(230,15)
    nv1.setSliceType(nv1.sliceTypeMultiplanar);
  </script>
</body>

</html>